<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>统计页面A（点标题切换统计）</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="app" class="container">
    <div class="header">
        <a href="./index2.html" title="点击切换统计"><span class="title">∞ XX概况总览 ∞</span></a>
        <!-- /.header -->
    </div>

    <div class="content">
        <div class="left">
            <div class="left-1">
                <div class="title"><span>XX对象统计</span></div>
                <div class="body">
                    <div class="r1"><span id="left1-total">0</span><span class="small">人</span></div>
                    <div id="ss-sex1" class="r2"></div>
                    <div class="r3">
                        <div id="ss-sex2" class="r3"></div>
                    </div>
                </div>
                <!-- /.left-1 -->
            </div>

            <div class="left-2">
                <div class="title"><span>XX职级TOP5</span></div>
                <div class="body">
                    <div class="r1">
                        <div id="ss-work-type" class="r1"></div>
                    </div>
                </div>
                <!-- /.left-2 -->
            </div>
            <!-- /.left -->
        </div>

        <div class="center">
            <div class="body">
                <div class="r1">
                    <div id="ss-c-r1-c1" class="c1"></div>
                    <div id="ss-c-r1-c2" class="c2"></div>
                    <div id="ss-c-r1-c3" class="c3"></div>
                </div>
                <div class="r2">
                    <div id="ss-center-r2">暂无数据</div>
                </div>
            </div>
            <!-- /.center -->
        </div>

        <div class="right">
            <div class="right-1">
                <div class="title"><span>XX房间信息</span></div>
                <div class="body">
                    <div class="table-wrapper">
                        <table id="right1-table" class="table-simple">
                            <thead>
                            <tr>
                                <td>房间编号</td>
                                <td>房间名称</td>
                                <td>房间状态</td>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="right1-paginate" class="paginate"></div>
                </div>
                <!-- /.right-1 -->
            </div>

            <div class="right-2">
                <div class="title"><span>XX对象留置时间</span></div>
                <div class="body">
                    <div class="table-wrapper">
                        <table id="right2-table" class="table-simple">
                            <thead>
                            <tr>
                                <td>审查对象</td>
                                <td>预约编号</td>
                                <td>留置时间</td>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="right2-paginate" class="paginate"></div>
                </div>
                <!-- /.right-2 -->
            </div>
            <!-- /.right -->
        </div>
    </div>
    <!-- /.container -->
</div>

<!-- Scripts -->
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/jquery.pagination.min.js"></script>
<script src="./js/data.js"></script>
<script>
    $(function () {
        initPage1();
    });

    function initPage1() {
        initPage1Left1();
        initPage1Left2();
        initPage1Center();
        initPage1Right1();
        initPage1Right2();
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Init Page 1 Begin
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    function initPage1Left1() {
        // R1
        var dataR1 = data.left1.r1;
        $("#left1-total").html(dataR1);

        // R2
        var dataR2 = data.left1.r2;
        var dom = document.getElementById("ss-sex1");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            legend: {
                orient: 'vertical',
                x: 'right',
                align: 'left',
                left: '50%',
                top: '30%',
                data:[
                    {name:'男', icon:'circle'},
                    {name:'女', icon:'circle'}
                ],
                formatter: function(name) {
                    var total = 0;
                    var value;
                    for (var i in dataR2) {
                        var item = dataR2[i];
                        total += item.value;
                        if (item.name === name) {
                            value = item.value;
                        }
                    }
                    var percent = total === 0 ? 0 : ((value/total)*100).toFixed(0);
                    return $.formatString("{0}：{1} ({2}%)", name, value, percent);
                },
                textStyle: {
                    color: "#fff"   // 图例文字颜色
                }
            },
            series: [
                {
                    name:'性别统计',
                    type:'pie',
                    center: ['22%', '50%'],
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false
                    },
                    data: dataR2
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);

        // R3
        var dataR3 = data.left1.r3;
        var dom = document.getElementById("ss-sex2");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                show: false,
                left: '2.5%',
                right: '2.5%',
                top: '10%',
                bottom: '0',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['20-29岁', '30-39岁', '40-49岁', '50-59岁'],
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        fontSize: 12
                    }
                }
            ],
            yAxis : [
                {
                    show: true,
                    type : 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    minInterval: 1
                }
            ],
            series : [
                {
                    name:'人数',
                    type:'bar',
                    barWidth: '40%',
                    label: {
                        show: false,
                        position: 'insideTop'
                    },
                    data: dataR3
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage1Left2() {
        // R1
        var dataR1 = data.left2.r1;
        var dom = document.getElementById("ss-work-type");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            title : {
                text: '',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                left: 'left',
                data: dataR1.legendData,
                textStyle: {
                    color: "#fff"   // 图例文字颜色
                }
            },
            series : [
                {
                    name: 'XX职级TOP5',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data: dataR1.seriesData,
                    label: {
                        show: true
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage1Center() {
        // R1
        var dataR1 = data.center.r1;
        var dataMap = {
            'ss-c-r1-c1': [
                {value:dataR1.total, name:'房间总数', label:{show:true}, itemStyle:{color:'rgba(50,211,235,1)'}}
            ],
            'ss-c-r1-c2': [ // 5bc49f
                {value:dataR1.used, name:'使用中', label:{show:true}, itemStyle:{color:'rgba(255,123,123,1)'}},
                {value:dataR1.idle, name:'空闲中', label:{show:false}, itemStyle:{color:'rgba(255,123,123,0.2)'}}
            ],
            'ss-c-r1-c3': [
                {value:dataR1.used, name:'使用中', label:{show:false}, itemStyle:{color:'rgba(91,196,159,0.2)'}},
                {value:dataR1.idle, name:'空闲中', label:{show:true}, itemStyle:{color:'rgba(91,196,159,1)'}}
            ]
        };

        for (var key in dataMap) {
            var dom = document.getElementById(key);
            var chart = echarts.init(dom, GLOBAL_THEME);
            var option = {
                series: [
                    {
                        name:'房间统计',
                        type:'pie',
                        center: ['50%', '50%'],
                        radius: ['75%', '90%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: ['{c|\n\n{c}}', '{b|{b}}'].join('\n'),
                            rich: {
                                c: {
                                    fontSize: 36,
                                    fontWeight: 'bold',
                                    lineHeight: 12
                                },
                                b: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: '#fff',
                                    height: 60
                                }
                            }
                        },
                        data: dataMap[key]
                    }
                ]
            };
            chart.clear();
            chart.setOption(option, true);
        }

        // R2
        var dataR2 = data.center.r2;
        if (dataR2 == null || dataR2 === undefined || dataR2.length === 0) {
            return;
        }
        var dom = document.getElementById("ss-center-r2");
        var chart = echarts.init(dom, "");
        var option = {
            tooltip: {
                formatter: function (info) {
                    if (info.data.name === undefined) {
                        return "";
                    }
                    var data = $.parseJSON(info.data.name);
                    var tip = "<div style='text-align:left;'><p>房间编号："+data.k1+"<br/>房间名称："+data.k2+"<br>使用状态："+data.k3+"</p></div>";
                    return tip;
                }
            },
            series: [{
                type: 'treemap',
                width: '100%',
                height: '100%',
                squareRatio: 1,
                nodeClick: 'link',
                // roam: false,
                label: {
                    show: true,
                    position: 'insideBottomLeft',
                    formatter: function(info) {
                        if (info.data.name === undefined) {
                            return "";
                        }
                        var data = $.parseJSON(info.data.name);
                        var arr = [
                            '{no|'+data.k1+'}',
                            '{hr|}',
                            '{name|'+data.k2+'}',
                            '{label|'+data.k3+'}'
                        ];
                        return arr.join('\n');
                    },
                    rich: {
                        label: {
                            fontSize: 14,
                            backgroundColor: 'rgba(0,0,0,0.3)',
                            color: '#fff',
                            borderRadius: 3,
                            padding: [2, 4],
                            lineHeight: 25,
                            align: 'left'
                        },
                        no: {
                            fontSize: 14,
                            color: '#fff',
                            padding: [2, 0]
                        },
                        name: {
                            fontSize: 14,
                            color: '#fff',
                            padding: [2, 0]
                        },
                        hr: {
                            width: '100%',
                            backgroundColor: 'rgba(0,0,0,0.3)',
                            height: 1,
                            lineHeight: 10
                        }
                    }
                },
                breadcrumb: {
                    show: false
                },
                levels: [{
                    itemStyle: {
                        color: "rgba(91,196,159,1)",
                        borderWidth: 5,
                        gapWidth: 5,
                        borderColor: 'transparent'
                    },
                    label: {
                        show: true
                    }
                }],
                data: dataR2
            }]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage1Right1() {
        buildDataTable({
            dataList: data.right1.list,
            tableBody: $("#right1-table tbody"),
            paginate: $("#right1-paginate"),
            pageItems: 10
        });
    }

    function initPage1Right2() {
        buildDataTable({
            dataList: data.right2.list,
            tableBody: $("#right2-table tbody"),
            paginate: $("#right2-paginate"),
            pageItems: 5
        });
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Init Page 1 End
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // 构建数据表格
    function buildDataTable(props) {
        var $dataList = props.dataList;
        var $tableBody = props.tableBody;
        var $paginate = props.paginate;
        var $pageItems = props.pageItems;

        if ($dataList === undefined || $dataList.length === 0) {
            $($tableBody.html("<tr><td colspan='3'>暂无记录</td></tr>"));
            return;
        }

        var totalCount = $dataList.length;
        var totalPages = totalCount % $pageItems === 0 ? totalCount / $pageItems : totalCount / $pageItems + 1;

        $paginate.twbsPagination('destroy');
        $paginate.twbsPagination({
            totalPages: totalPages,
            visiblePages: 3,
            hideOnlyOnePage: false,
            first: '←',
            prev: null,
            next: null,
            last: '→',
            onPageClick: function (event, page) {
                $tableBody.html("");
                var start = (page - 1) * $pageItems;
                for (var i = 0; i < $pageItems; i++) {
                    var item = $dataList[start + i];
                    if (item === undefined) {
                        break;
                    }
                    var html = $.formatString("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", item.k1, item.k2, item.k3);
                    $tableBody.append(html);
                }
            }
        });
    }

    // 格式化字符串
    $.formatString = function(str) {
        for ( var i = 0; i < arguments.length - 1; i++) {
            str = str.replace("{" + i + "}", arguments[i + 1]);
        }
        return str;
    };
</script>
</body>
</html>